<template>
  <div class="linedUp">
   <uv-image width="750rpx" height="213rpx" src="/static/222ee.png"></uv-image>
   <view class="body_content_back">
    <view class="my_current">
       <view class="iamge_my">
        <uv-icon size="30" color="#018ab4" name="account-fill"></uv-icon>
       
        &nbsp;
        我的当前排名
       </view>

        <view v-if="myLinedUp" class="font_red">
          {{ myLinedUp }}
        </view>
        <view v-if="!myLinedUp" class="font_red">
          暂无排名
        </view>
    </view>
  </view>


   <view class="table_my">
     <view class="header_title">
       <view style="width: 10%;" class="width_25">
        排名
       </view> 
       <view style="width: 25%;" class="width_25">
        用户名
       </view>
       <view style="width: 60%;" class="width_25">
        订单号
       </view>  
       <view style="width: 15%;" class="width_25">
        返款进度
       </view> 
     </view>

     <view v-for="(item,index) in linedupList" :key="index" class="table_title_content">
       <view style="width: 8%;" class="width_25_1">{{ item.rankingList + 1 }}</view>
       <view style="width: 25%;" class="width_25_1">{{ strFn(item.userMobile)|| '暂无手机号' }}</view>
       <view style="width: 60%;" class="width_25_1">{{ item.orderNumber }}</view>
       <view style="width: 15%;" class="width_25_1">
        <view v-if="item.total == 0" class="red_text_s">{{ 100 }}%</view>

        <view v-else class="green_text_s">{{ item.progress * 100 }}%</view>
       </view>
     </view>
   </view>
  </div>
</template>

<script setup>
import { onShow ,onReachBottom,onLoad } from '@dcloudio/uni-app';
import {getLine,myRanking} from '../https/api/linedup'
import { ref ,watch} from 'vue';
console.log('排队页面')

let prop = defineProps(['show'])
let sizeNum = ref(20)


let strFn = (str) => {
  return str.substring(0,3) + '****' + str.substring(7)
}

onReachBottom(()=>{
	if(totalNum.value>=sizeNum.value){
		sizeNum.value += 20
		getLineData({
  rebateStatus:0,
size: sizeNum.value,
current:1
  })
	}else{
		uni.showToast({
			title:'没有更多了',
			icon:'none'
		})
		
	}

})


let myLinedUp = ref('')
let totalNum = ref(1)
let linedupList = ref([])
let getLineData = async(data) => {
 
    let res = await getLine(data)
    let res2 = await myRanking()
    if(res){
      myLinedUp.value = res2.data.ranking
      totalNum.value = res.data.total
      linedupList.value = res.data.records.map((v,i)=>{
        return {
          ...v,
          rankingList:i,
          userName:v.nickName,
          orderNumber:v.orderNumber,
          progress: v.rebateAmount / v.total
        }
      })
    }
}



onLoad(()=>{
  console.log(12312312412)
  

})
watch(prop,()=>{
  getLineData({
    rebateStatus:0,
    size:sizeNum.value,
    current:1
  })
},{immediate: true})
</script>

<style lang="scss" scoped>
.green_text_s{
  color: #05C100;
}
.red_text_s{
  color: #ED5C0D;
}
.table_title_content{
  display: flex;
  align-items: center;
  justify-content: space-between;  
}
.width_25_1{
  overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 1;//文字上限行
		-webkit-box-orient: vertical;


  padding: 20rpx 0rpx;
  padding-left: 10rpx;
  border-bottom: 1rpx dashed #ccc;
  font-family: Microsoft YaHei;
font-weight: 400;
font-size: 24rpx;


  width: 25%;
}
.width_25{
 
  font-family: Microsoft YaHei;
font-weight: 400;
font-size: 24rpx;
color: #838383;

  width: 25%;
}
.header_title{
 
  font-size:24rpx ;
  display: flex;
  align-items: center;
  justify-content: space-between;  
}
.table_my{
  padding: 20rpx;
  background: white;
  border-radius: 10rpx;
  margin: 20rpx;
}
.font_red{
  font-family: Microsoft YaHei;
font-weight: bold;
font-size: 26rpx;
color: #018ab4;

}
.body_content_back{

 z-index: 23;
 position: relative;
 margin-top: -20rpx;
  padding: 0 20rpx;
  
}
.iamge_my{

  font-family: Microsoft YaHei;
font-weight: 400;
font-size: 26rpx;
color: #000000;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_current{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 10rpx;
  background: white;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.linedUp{
  min-height: 100vh;
  background: #F8F8F8;
}
</style>